<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/index.css">
  <title>消费卷</title>
</head>
<body>

  <div class="main">
    <div class="header">
      <img id="header-bgTop" src="./image/bgTop.png">
      <div class="header-title">
        商&emsp;家&emsp;入&emsp;驻
      </div>
      <div class="header-con">
        <div class="header-con1">
          <span class="header-con1-title1">2000</span>
          <span class="header-con1-title2">万</span>
        </div>
        <div class="header-con2">
          消费券补贴消费专区
        </div>
        <div class="header-con3">
          立即抢券
        </div>
        <div class="header-con4">
          活动时间：7/12-9/12
        </div>
      </div>
      <div class="header-gradual"></div>
    </div>
    <div class="main-bottom">
      <img id="main-bgBottom" src="./image/bgBottom(1).png">
      <img id="main-conBg1" src="./image/conBg1.png">
      <div class="main-con">
        <div class="main-bottom-box">
          <div class="main-bottom-box-header">活动形式</div>
          <div class="main-bottom-box-con">
            <div class="main-bottom-box-con1">
              <div class="main-bottom-box-con1-index">1</div>
              <div class="main-bottom-box-con1-con">
                政府惠民消费券通过福禄行”微信小程序发放，由工商银行“聚福通”作为消费券金融核算后台。消费券共分为三类：一是消费通用券；二是家电优惠券；三是汽车消费补贴。 
              </div>
            </div>
            <div class="main-bottom-box-line"></div>
            <div class="main-bottom-box-con1">
              <div class="main-bottom-box-con1-index">2</div>
              <div class="main-bottom-box-con1-con">
                政府惠民消费券通过福禄行”微信小程序发放，由工商银行“聚福通”作为消费券金融核算后台。消费券共分为三类：一是消费通用券；二是家电优惠券；三是汽车消费补贴。 
              </div>
            </div>
            <div class="main-bottom-box-line"></div>
            <div class="main-bottom-box-con1">
              <div class="main-bottom-box-con1-index">3</div>
              <div class="main-bottom-box-con1-con">
                政府惠民消费券通过福禄行”微信小程序发放，由工商银行“聚福通”作为消费券金融核算后台。消费券共分为三类：一是消费通用券；二是家电优惠券；三是汽车消费补贴。 
              </div>
            </div>
          </div>
        </div>
        <div class="main-bottom-box">
          <div class="main-bottom-box-header">全市通用券</div>
          <div class="main-bottom-box-con">
            <div class="main-bottom-box-con2">
              <span>发放规模：</span>
              500万元，面值为30元、20元、10元。 
            </div>
            <div class="main-bottom-box-con2">
              <span>领取方式：</span>
              采取每周限额发放，先到先得的方式。在“福禄行”微信小程序上，每个用户每周可享受一次获券机会，共3张券（30元、20元、10元各一张），有效期7天，过期未使用自动收回。 
            </div>
            <div class="main-bottom-box-con2">
              <span>使用方式：</span>
              在商场、百货、加油、餐饮等居民消费领域使用消费满200元（含）减30元、满100元（含）减20元。在超市、生鲜、药店、便利店、美容美发等居民生活服务领域使用消费满20元（含）减10元的消费优惠券。（单用途预付卡、黄金首饰。。。消费除外） 
            </div>
            <div class="main-bottom-box-con2">
              <span>核销方式：</span>
              消费者使用消费券时，可选用微信、支付宝、云闪付等方式支付，支付同时消费券自动抵消。工商银行“聚富通”后台于次日与产生交易商户结算。 
            </div>
          </div>
        </div>
        <div class="main-bottom-box">
          <div class="main-bottom-box-header">家电优惠券</div>
          <div class="main-bottom-box-con">
            <div class="main-bottom-box-con2">
              <span>发放规模：</span>
              200万元，面值为100元、50元。 
            </div>
            <div class="main-bottom-box-con2">
              <span>领取方式：</span>
              采取消费者到店扫码方式领券，消费券领取当日有效，过期未使用自动收回。参与门店布放红包码，消费者通过“福禄行”微信小程序扫描红包码领券，之后消费立减。活动期间每个消费者限使用两张消费券（100元和50元各一张）。资金发放完毕或者活动时限到期后自动结束。 
            </div>
            <div class="main-bottom-box-con2">
              <span>使用方式：</span>
              消费者在参与活动商家消费满2000元（含）以上减100元、满1000元（含）以上减50元，可与商家优惠叠加使用。 
            </div>
            <div class="main-bottom-box-con2">
              <span>核销方式：</span>
              消费者使用消费券时，可选用微信、支付宝、云闪付等方式支付，支付同时消费券自动抵消。工商银行“聚富通”后台于次日与产生交易商户结算。 
            </div>
          </div>
        </div>
        <div class="main-bottom-box">
          <div class="main-bottom-box-header">汽车消费补贴</div>
          <div class="main-bottom-box-con">
            <div class="main-bottom-box-con2">
              <span>发放规模：</span>
              300万元，面值为2000元、1000元。 
            </div>
            <div class="main-bottom-box-con2">
              <span>补贴方式：</span>
              自7月1日起至8月31日，在我市汽车销售商户或车展活动现场购置非营运车辆（不含二手车）的消费者，购车发票金额15万（含）以下的补贴1000元；购车发票金额15万（不含）以上补贴2000元。每个消费者限补一次。 
            </div>
            <div class="main-bottom-box-con2">
              <span>申领流程：</span>
              活动期间个人消费者通过“福禄行”微信小程序中“葫芦岛汽车补贴”上传购车相关证明材料（包括银联卡交易小票、申领补贴本人借记卡影像资料、购车用户身份证、机动车行驶证、机动车购车发票、电子版车辆购置完税证明、车辆保单、牌照登记等），经审核通过后,将补贴发放至消费者个人银行账户。 
            </div>
          </div>
        </div>
      </div>
      <img id="main-conBg3" src="./image/conBg3.png">
    </div>
  </div>

  <script>

    window.onresize = () => {
      setBoxHeader();
    };

    setBoxHeader();

    function setBoxHeader() {

      // 默认 width 1080px 时 高度自适应
      let bgTopWidth = document.getElementById('header-bgTop').width;

      // header-title top 为 446px
      let headerTitle = document.getElementsByClassName('header-title')[0];
      headerTitle.style.top = (bgTopWidth / 1080 * 446) + 'px';

      // header-con top 为 580px
      let headerCon = document.getElementsByClassName('header-con')[0];
      headerCon.style.top = (bgTopWidth / 1080 * 560) + 'px';
      
      // main-bottom top 为 862px
      // 设置bottom背景图片的高度
      let mainBottom = document.getElementsByClassName('main-bottom')[0];
      let mainConBg1 = document.getElementById('main-conBg1');
      let mainConBg3 = document.getElementById('main-conBg3');
      let mainCon = document.getElementsByClassName('main-con')[0];
      // main-con top 为 330
      // main-bottom-box top 为 -160
      let mainBottomBox = document.getElementsByClassName('main-bottom-box');
      mainCon.style.top = (bgTopWidth / 1080 * 330) + 'px';
      for(let item of mainBottomBox) {
        item.style.top = (bgTopWidth / 1080 * -160) + 'px';
      }
      mainBottom.style.top = (bgTopWidth / 1080 * 862) + 'px';
      mainBottom.style.height = mainConBg1.scrollHeight + mainCon.scrollHeight + (mainConBg3.scrollHeight / 2) + 'px';
    }

  </script>

</body>
</html>